<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>4.深度监视</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			深度监视：
					(1).watch默认不监测对象内部值的改变（监视一层，即：对象地址值）。
					(2).配置deep:true可以监测对象内部值改变（监视多层）。
				备注：
					(1).使用watch时根据数据的具体结构，以及需求，决定是否采用深度监视。
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<ul>
				<li>姓名：{{name}}</li>
				<li>真实年龄：{{age.realAge}}</li>
				<li>对外年龄：{{age.foreignAge}}</li>
				<button @click="age.realAge += 1">真实年龄+1岁</button>
				<button @click="age.foreignAge -= 1">对外年龄-1岁</button>
				<button @click="name += '~' ">改名</button>
				<button @click="age = {realAge:90,foreignAge:10}">彻底替换掉age对象</button>
			</ul>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			new Vue({
				el:'#demo',
				data:{
					name:'强哥',
					age:{
						realAge:50,
						foreignAge:18
					}
				},
				watch:{
					//监视基本类型数据
					/* name:{
						handler(value){
							console.log('name变化了',value)
						}
					}, */

					//监视某对象中的属性
					/* 'age.realAge':{
						handler(value){
							console.log('真实年龄变化了',value)
						}
					}, */

					//监视整个对象（监视的是地址值，即：对象中的属性变化，不会检测到）
					/* age:{
						handler(){
							console.log('age变化了')
						}
					}, */

					//监视整个对象（即监视地址值，也监视对象中的属性变化）
					age:{
						deep:true,
						handler(){
							console.log('age变化了')
						}
					}
				}
			})
		</script>
	</body>
</html>